<template>
<div><button @click="toCity">{{city}}</button></div>
  <div class="home">
    <div class="item" v-for="item of musics" :key="item._id" @click="toDetail(item.id,item.name)">
      <img :src="item.coverImgUrl" alt="" />
      <p>{{ item.name}}</p>
    </div>
  </div>
</template>

<script>
import HookCity from './hooks/city'
import HookMusic from './hooks/music'

export default {
  name: "Home",
  setup() {
    const cityState = HookCity();
    
    const musicState = HookMusic();
   return {
      ...cityState,
      ...musicState
    }
    
  },
};
</script>
<style scoped>
.home {
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  padding: 20px;
}
.item img {
  width: 200px;
  height: 200px;
}
.item p {
  width: 200px;
}
</style>

